<template>
  <div style="padding: 20px">
    <Alert message="统计数值示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>使用组件a-statistic</div>
        <div>组件属性：</div>
        <div>title：数值标题，例如设备总数，维修中设备，维保中设备</div>
        <div>value：数值</div>
        <div>precision：数值精度</div>
        <div>a-statistic-countdown为倒计时组件</div>
      </template>
    </Alert>
    <div class="demoTittle">基本用法</div>
    <div class="demoTittle2 marginBtm18">- 简单用法；</div>
    <div class="demoTittle2 marginBtm18">- 通过前缀和后缀添加单位；</div>

    <a-space :size="20">
      <div class="statisticBox">
        <div class="tittle marginBtm18">
          <div class="color444444" style="font-size: 16px">设备概况</div>
          <div class="color666666" style="font-size: 12px">单位:台</div>
        </div>
        <a-space :size="50">
          <a-statistic title="设备总数" :value="2137"> </a-statistic>
          <a-statistic title="维修中设备" :value="12980"> </a-statistic>
          <a-statistic title="维保中设备" :value="345"> </a-statistic>
          <a-statistic title="点检中设备" :value="1">
            <template #suffix>
              <span>/ 9</span>
            </template>
          </a-statistic>
        </a-space>
      </div>
      <div class="statisticBox">
        <div class="tittle marginBtm18">
          <div class="color444444" style="font-size: 16px">设备概况</div>
        </div>
        <a-space :size="50">
          <a-statistic title="设备总数" :value="137">
            <template #suffix>
              <span style="font-size: 14px">台</span>
            </template>
          </a-statistic>
          <a-statistic title="维修中设备" :value="12">
            <template #suffix>
              <span style="font-size: 14px">件</span>
            </template>
          </a-statistic>
          <a-statistic title="维保中设备" :value="50.5" :precision="1" suffix="%"> </a-statistic>
        </a-space>
      </div>
      <div class="statisticBox">
        <div class="tittle marginBtm18">
          <div class="color444444" style="font-size: 16px">计时</div>
        </div>
        <a-space :size="50">
          <a-statistic-countdown title="Countdown" :value="deadline" style="margin-right: 50px" />
          <a-statistic-countdown title="Day Level" :value="deadline" format="D 天 H 时 m 分 s 秒" />
        </a-space>
      </div>
      <div class="statisticBox">
        <div class="tittle marginBtm18">
          <div class="color444444" style="font-size: 16px">设备概况</div>
        </div>
        <a-space :size="50">
          <a-statistic title="设备总数" :value="137">
            <template #suffix>
              <span style="font-size: 14px">台</span>
            </template>
          </a-statistic>
          <a-statistic title="维修中设备" :value="12">
            <template #prefix>
              <ArrowUpOutlined color="#09B840" style="font-size: 14px" />
            </template>
            <template #suffix>
              <span style="font-size: 14px">件</span>
            </template>
          </a-statistic>
          <a-statistic title="设备完成率" :value="50.5" :precision="1">
            <template #prefix>
              <ArrowDownOutlined color="#E22C4C" style="font-size: 14px" />
            </template>
            <template #suffix>
              <span style="font-size: 14px">%</span>
            </template>
          </a-statistic>
        </a-space>
      </div>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
  const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }
  .color444444 {
    color: #444444;
  }

  .statisticBox {
    border: 1px solid #f0f0f0;
    padding: 16px;

    .tittle {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
